<template>
  <div>
    <div v-if="userStore.getUserInfo.extend.extendS2 == '01'">
      <div class="title">
        <p>
          {{ `欢迎使用${title}（${shortName}）` }}
        </p>
      </div>
      <!-- <div style="background: #fff;text-align: center;height: 50px;"></div> -->
    </div>
    <div v-if="userStore.getUserInfo.extend.extendS2 != '01'">
      <div
        class="enter-y"
        style="
          background: #fff;
          text-align: center;
          height: 75px;
          position: relative;
          font-size: 50px;
          font-weight: bold;
          line-height: 75px;
        "
      >
        <a style="font-family: serif; font-style: italic">医疗废物收运数据监控平台</a>
        <div style="position: absolute; top: 0; right: 0; width: 300px; height: 100%">
          <BasicForm style="margin: auto; margin-top: 15px" ref="form" @register="registerForm" />
        </div>
      </div>
      <!-- <GrowCard :loading="loading" class="enter-y" /> -->
      <!-- <SiteAnalysis class="!my-4 enter-y" :loading="loading" /> -->
      <div class="md:flex enter-y !my-4">
        <list1 :res="res1" class="md:w-1/2 w-full !mr-4" :loading="loading" />
        <list2 :res="res2" class="md:w-1/2 w-full" :loading="loading" />
        <!-- <SiteAnalysis class="md:w-1/2 w-full !mr-4" :loading="loading" />
        <SiteAnalysis class="md:w-1/2 w-full" :loading="loading" /> -->
      </div>
      <div class="md:flex enter-y">
        <list3 :res="res3" class="md:w-1/3 w-full" :loading="loading" />
        <list4 :res="res4" class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
        <list5 :res="res5" class="md:w-1/3 w-full" :loading="loading" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'Analysis',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import VisitSource from './components/VisitSource.vue';
  import VisitRadar from './components/VisitRadar.vue';
  import SalesProductPie from './components/SalesProductPie.vue';

  import list1 from './components/list1.vue';
  import list2 from './components/list2.vue';
  import list3 from './components/list3.vue';
  import list4 from './components/list4.vue';
  import list5 from './components/list5.vue';

  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import {
    areaTreeData,
    preCollectionCensus,
    getHospTypeCensus,
    getConstractCensus,
    getShQtyCensus,
    getPreQtyCensus,
  } from '/@/api/sys/desktop';

  import { useGlobSetting } from '/@/hooks/setting';
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();

  const { title, shortName } = useGlobSetting();
  const loading = ref(true);
  const res1 = ref<any>('');
  const res2 = ref<any>('');
  const res3 = ref<any>('');
  const res4 = ref<any>('');
  const res5 = ref<any>('');

  setTimeout(async () => {
    let treeArr = await areaTreeData();
    if (treeArr.length) {
      await setFieldsValue({
        areaCode: treeArr[0].id,
        areaName: treeArr[0].name,
      });
      res1.value = await getShQtyCensus({ areaCode: treeArr[0].id });
      res2.value = await getPreQtyCensus({ areaCode: treeArr[0].id });
      res3.value = await preCollectionCensus({ areaCode: treeArr[0].id });
      res4.value = await getHospTypeCensus({ areaCode: treeArr[0].id });
      res5.value = await getConstractCensus({ areaCode: treeArr[0].id });
    }
    loading.value = false;
  }, 1000);
  const [registerForm, { getFieldsValue, validate, setProps, setFieldsValue }] = useForm({
    labelWidth: 60,
    // showActionButtonGroup: true,
    // showAdvancedButton: true,
    // compact: true,
    baseColProps: { lg: 24, md: 24 },
    schemas: [
      {
        // label: '区域',
        label: '',
        field: 'areaCode',
        fieldLabel: 'areaName',
        component: 'TreeSelect',
        componentProps: {
          api: areaTreeData,
          canSelectParent: false,
          allowClear: true,
          placeholder: '区域选择',
          immediate: true,
          onChange: async (e) => {
            // 清除时调用
            if (!e) {
              res1.value = await getShQtyCensus();
              res2.value = await getPreQtyCensus();
              res3.value = await preCollectionCensus();
              res4.value = await getHospTypeCensus();
              res5.value = await getConstractCensus();
            }
          },
          onSelect: async (value, node, extra) => {
            console.log(value, node, extra);
            res1.value = await getShQtyCensus({ areaCode: value });
            res2.value = await getPreQtyCensus({ areaCode: value });
            res3.value = await preCollectionCensus({ areaCode: value });
            res4.value = await getHospTypeCensus({ areaCode: value });
            res5.value = await getConstractCensus({ areaCode: value });
          },
        },
        itemProps: { validateTrigger: 'blur' },
      },
    ],
  });
</script>
<style scoped>
  .title {
    width: 100%;
    height: calc(100vh - 100px);
    background: #fff;
    font-size: 60px;
    font-weight: bold;
    font-family: serif;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
